<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        #top{
            /*height: 100px;*/
            /*overflow: hidden;*/
        }
        div{
            /*border: 1px red solid;*/
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">广告管理</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
    <div id="app">
        <el-row type="flex" justify="center">
            <el-col :span="12">
                <el-card shadow="always"
                         align="center"
                         style="font-size: 15px;background-color: #66b1ff;color: white">
                    申请资料种类
                </el-card>
                <el-menu
                        default-active="0"
                        class="el-menu-vertical-demo"
                        align="center">
                    <el-menu-item v-for="(item,i) in tableData"
                                  :key="i"
                                  id="i"
                                  @click=show(i)>
                        {{item.configName}}
                    </el-menu-item>
                    <el-button type="primary" @click="updateDialogFormVisible = true" plain style="margin-top: 20px" size="medium">新增</el-button>
                    <div id="medel_box">
                        <el-dialog title="新增资料配置" :visible.sync="updateDialogFormVisible">
                            <el-form :model="form">
                                <el-form-item label="资料名称" :label-width="formLabelWidth">
                                    <el-input v-model="newDataName" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="updateDialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click=add()>确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </el-menu>
            </el-col>
            <el-col :span="12">
                <el-card shadow="always"
                         align="center"
                         style="font-size: 15px;background-color: #66b1ff;color: white">
                    编辑区
                </el-card>
                <el-row type="flex" justify="center">
                    <el-col :span="20">
                        <el-form ref="form" :model="form" label-width="125px">
                            <el-form-item label="资料名称" style="margin-top: 15px">
                                <el-input v-model="form.configName" readonly></el-input>
                            </el-form-item>
                            <el-form-item label="是否提前准备">
                                <el-switch v-model="form.readyBefore" ></el-switch>
                            </el-form-item>
                            <el-form-item label="资料要求">
                                <el-input type="textarea" v-model="form.request" rows="4" resize="none"></el-input>
                            </el-form-item>
                            <el-form-item label="是否上传附件">
                                <el-switch v-model="form.attachment"></el-switch>
                            </el-form-item>
                            <el-form-item label="资料模块">
                                <el-input v-model="data_model" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="是否需要位置信息">
                                <el-switch v-model="data_loc" disabled></el-switch>
                            </el-form-item>
                            <el-form-item label="操作说明">
                                <el-input type="textarea" v-model="form.optDesc"  rows="4" resize="none"></el-input>
                            </el-form-item>
                            <el-form-item label="是否必填">
                                <el-switch v-model="form.necessary"></el-switch>
                            </el-form-item>
                            <el-form-item align="center">
                                <el-button type="primary" @click="onSubmit">保存更改</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</div>

<script th:inline="javascript">
    let app = new Vue({
        el:'#main',
        data:{
            tableData:[],
            pageSize:10,
            total:'',
            data_model:"客户申请资料",
            data_loc:true,
            newDataName:'',
            updateDialogFormVisible:false,
            form: {
                configName:'',
                readyBefore:'',
                request: '',
                attachment: '',
                optDesc:'',
                necessary:'',
                delFlag:''
            },
            formLabelWidth:'120px',
        },
        methods:{
            //向后端发起请求，加载表格内容，传的参数是当前查第几页
            getData(val){
                axios.get([[@{applydata/page}]],{
                    params:{
                        //每页多少条
                        limit:this.pageSize,
                        //从什么地方开始查
                        offSet:0,
                        //当前查第几页
                        pageNum:val,
                        //排序字段和排序方式
                        sort:"id",
                        sortOrder:"desc",
                        //要传属性的继续写在下面

                    }
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].readyBefore === 1){
                            this.tableData[i].readyBefore = true;
                        }
                        else{
                            this.tableData[i].readyBefore = fasle;
                        }
                        if(this.tableData[i].attachment === 1){
                            this.tableData[i].attachment = true;
                        }
                        else{
                            this.tableData[i].attachment = fasle;
                        }
                        if(this.tableData[i].necessary === 1){
                            this.tableData[i].necessary = true;
                        }
                        else{
                            this.tableData[i].necessary = fasle;
                        }
                    }
                    this.form = this.tableData[0];
                    // this.form.id = res.data.rows[1].id;
                    // this.form.configName = res.data.rows[1].configName;
                    // this.form.readyBefore = res.data.rows[1].readyBefore;
                    // this.form.request = res.data.rows[1].request;
                    // this.form.attachment = res.data.rows[1].attachment;
                    // this.form.optDesc = res.data.rows[1].optDesc;
                    // this.form.necessary = res.data.rows[1].necessary;
                }).catch(error => {
                    console.log(error);
                })
            },
            show(i){
                this.form = this.tableData[i];
            },
            onSubmit(){
                this.form.readyBefore = this.form.readyBefore?1:0;
                this.form.attachment = this.form.attachment?1:0;
                this.form.necessary = this.form.necessary?1:0;
                axios({
                    method:'PUT',
                    url:[[@{applydata/infor}]],
                    data: this.form
                }).then((res) => {
                    this.form.readyBefore = this.form.readyBefore!=0?true:false;
                    this.form.attachment = this.form.attachment!=0?true:false;
                    this.form.necessary = this.form.necessary!=0?true:false;
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }).catch((e)=>{
                    console.log(e);
                })
            },
            add(){
                axios({
                    method:'POST',
                    url:[[@{applydata/more/}]]+this.newDataName
                }).then((res) => {
                    this.updateDialogFormVisible = false;
                    this.newDataName='';
                    this.getData(1);
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }).catch((e)=>{
                    console.log(e);
                })
            }
        },
    //创建时执行查询，查第一页
    created : function () {
        this.getData(1);
    }
    });
    let app3 = new Vue({
        el:"#top"
    });
</script>
</body>
</html>